<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>我是a页面</h1>
    颜色 :<input type="text" class="color" />
    宽度 ： <input type="text" class="w" />
    高度： <input type="text" class="h">
    <!-- <a href="./b.html?color="></a> -->
    <button>点击我跳转到b.html</button>
    <script>
        var btn = document.querySelector("button");
        var colorEle = document.querySelector(".color");
        var widthEle = document.querySelector(".w");
        var heightEle = document.querySelector(".h");
        btn.onclick = function () {
            // 1.跳转到b页面 2.携带参数
            var colorVal = colorEle.value;
            var w = widthEle.value;
            var h = heightEle.value;
            // // 注意 ： querystring 参数无论是数字还是字符串都不需要加引号
            // window.location.href = "./b.html?color="+colorVal;

            // 跨页面传递对象
            // 获取参数 当成配置项 保持起来

            var config = {
                color: colorVal,
                w: w,
                h: h
            }

            //     能不能把对象 自动转成 querysting的格式 ?
            //     var obj = {
            //         name:11,
            //         age:20
            //     }
            //    var str =  o2s(obj);
            //    实现 o2s函数?
            //    str--->?name=11&age=20;


            console.log(config);
            window.location.href = "./b.html?color=" + config.color + "&w=" + config.w + "&h=" + config.h;

        }




        // 把对象转成 querystring格式 ；
        var obj = {
            name: 11,
            age: 20
        }
        var str = o2s(obj);
        console.log(str); //name=11&age=20;

        // 实现 o2s的函数逻辑
        function o2s(obj){
            // ...
            // 第一步 ： 把对象 转成 数组  ---> ["name=11","age=20"]
            var arr = [];
            for(var key in obj){
                // for in 循环 会循环对象自身属性 ，也会循环对象所在原型链上的属性；
                var one = key+"="+obj[key];
                console.log(one);
                arr.push(one);
            }
            console.log(arr);

            // 第二步 ： 可以把数组通过指定字符串连接成字符串； arr.join("&");
            return "?"+arr.join("&");
        }
    </script>
</body>

</html>